<template>
  <div>
    <div>路由传参id：{{ $route.params.id }}</div>
    <div>路由传参name：{{ $route.query.name }}</div>
    <div>你好：{{$store.state.loginUser.name}}</div>
    <div>你好：{{$store.getters.getUserName}}</div>
    <div>名字长度：{{nameLength}}</div>
    <el-input v-model="formData.id">
      <el-button slot="append" icon="el-icon-search" @click="navigateTo"></el-button>
    </el-input>
    <el-input v-model="formData.name">
      <el-button slot="append" icon="el-icon-search" @click="updateName"></el-button>
    </el-input>
  </div>
</template>

<script>
export default {
  props: {
    params: {
      type: Object
    }
  },
  data() {
    return {
      formData: {
        id: "",
        name: ""
      }
    }
  },
  computed: {
    nameLength() {
      return this.$store.state.loginUser.name?.length || 0;
    }
  },
  methods: {
    navigateTo() {
      // this.$router.push({name: 'params', params: {id: this.id}});
      this.$router.push(`/params/${this.formData.id}?name=Hydra`);
    },
    updateName() {
      this.$store.commit("setLoginUserName",this.formData.name);
    }
  },
  watch: {
    params(newVal) {
      if (!newVal) {
        return;
      } 
      console.log("新的ID：",newVal);
    }
  }
}
</script>

<style></style>